<template>
    <div class="drawer">
        <el-drawer v-model="pageSet().isUnfold" title="系统布局配置" :show-close="true" :close-on-click-modal='true'
            :close-on-press-escape='false' size="300px">
            <div class="wrap">
                <div class="titleBox">
                    <el-icon>
                        <Grid />
                    </el-icon>
                    <span class="title">布局样式</span>
                </div>
                <div class="layoutBox">
                    <div class="layout" @click="changeLayout('lengthways', '纵向')"
                        :class="{ 'is-selected': selectLayout === 'lengthways' }">
                        <div class="lengthways public">
                            <el-icon>
                                <CircleCheckFilled />
                            </el-icon>
                            <div class="lengthways-left"></div>
                            <div class="lengthways-right">
                                <div class="lengthways-right-top"></div>
                                <div class="lengthways-right-bottom"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layout" @click="changeLayout('classical', '经典')"
                        :class="{ 'is-selected': selectLayout === 'classical' }">
                        <div class="classical public">
                            <el-icon>
                                <CircleCheckFilled />
                            </el-icon>
                            <div class="classical-top"></div>
                            <div class="classical-bottom">
                                <div class="classical-bottom-left"></div>
                                <div class="classical-bottom-right"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layout" @click="changeLayout('crosswise', '横向')"
                        :class="{ 'is-selected': selectLayout === 'crosswise' }">
                        <div class="crosswise public">
                            <el-icon>
                                <CircleCheckFilled />
                            </el-icon>
                            <div class="crosswise-top"></div>
                            <div class="crosswise-bottom"></div>
                        </div>
                    </div>
                    <div class="layout" @click="changeLayout('subfield', '分栏')"
                        :class="{ 'is-selected': selectLayout === 'subfield' }">
                        <div class="subfield public">
                            <el-icon>
                                <CircleCheckFilled />
                            </el-icon>
                            <div class="subfield-left"></div>
                            <div class="subfield-middle"></div>
                            <div class="subfield-right"></div>
                        </div>
                    </div>
                </div>
                <div class="drawer-item">
                    <span>侧边栏反转色</span><el-switch />
                </div>
                <div class="drawer-item">
                    <span>头部反转色</span><el-switch />
                </div>
            </div>
            <div class="wrap">
                <div class="titleBox">
                    <el-icon>
                        <ColdDrink />
                    </el-icon>
                    <span class="title">全局主题</span>
                </div>
                <div class="drawer-item">
                    <span class="demonstration">主体颜色</span>
                    <el-color-picker v-model="color" :predefine="globalColors.predefineColorList" />
                </div>
                <div class="drawer-item">
                    <span>暗黑模式</span><el-switch />
                </div>
                <div class="drawer-item">
                    <span>灰色模式</span><el-switch />
                </div>
                <div class="drawer-item">
                    <span>色弱模式</span><el-switch />
                </div>
            </div>
            <div class="wrap">
                <div class="titleBox">
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <span class="title">界面设置</span>
                </div>
                <div class="drawer-item">
                    <span>菜单折叠</span><el-switch />
                </div>
                <div class="drawer-item">
                    <span>面包屑</span><el-switch />
                </div>
                <div class="drawer-item">
                    <span>面包屑图标</span><el-switch />
                </div>
                <div class="drawer-item">
                    <span>Tab栏</span><el-switch />
                </div>
                <div class="drawer-item">
                    <span>Tab栏图标</span><el-switch />
                </div>
            </div>
            <!-- <div class="wrap"><span>改变布局</span><el-switch v-model="pageSet().layout" /></div>
            <div class="wrap"><span>开启 Tags-View</span><el-switch v-model="pageSet().tabShow" /></div>
            <div class="wrap"><span>固定 Header</span><el-switch v-model="pageSet().headerFix" /></div> -->
        </el-drawer>
    </div>
</template>
<script setup>
import { pageSet, globalColor } from '@/store/pinia';
import { onMounted, ref, watch,defineAsyncComponent } from 'vue';
import { changeCss } from "@/hooks/css/changeCssProperty";

/* 改变颜色 */
const globalColors = globalColor()
const color = ref(globalColor().color)
watch(() => {
    return color.value
}, nV => {
    globalColors.updateColorList(nV)
    changeCss(nV)
    globalColors.updateColor(nV)
})
/* 布局改变 */
const selectLayout = ref()
/**
 * @String menuMode(菜单布局 vertical:垂直,horizontal:水平)
 */
const layoutList = {
    'lengthways':{component:"layout_lengthways" ,value:"lengthways", menuMode: "vertical" },
    'classical':{component: "layout_classical" ,value:"classical", menuMode:"vertical"},
    'crosswise':{component: "layout_crosswise" ,value:"crosswise", menuMode: "horizontal" },
    'subfield':{component: "layout_subfield" ,value:"subfield", menuMode: "horizontal" },
}
const changeLayout = (value, label) => {
    selectLayout.value = value
    pageSet().updateLayoutComponent(layoutList[value])
}
onMounted(() => {
    changeCss(color.value)
    globalColors.updateColorList(color.value)
    pageSet().updateLayoutComponent(layoutList['lengthways'])
    selectLayout.value = pageSet().layoutComponent.value
    
})
</script>
<style lang="scss">
.drawer {
    width: 300px;
}

.drawer .el-drawer {
    overflow: visible !important;
}

.drawer .el-drawer__header {
    text-align: left;
    font-weight: 600;
    color: black;
    font-size: 16px;
    padding: 16px 20px;
    margin-bottom: 0px;
    border-bottom: 1px solid var(--drawer-border-color);
}

.drawer .el-drawer__body {
    margin: auto !important;
    padding: 0;
}

.drawer .el-drawer .wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 260px;
    margin: 20px 0;
}

.is-selected {
    box-shadow: 0 0 0 2px var(--isActive-color) !important;

    .el-icon {
        display: block !important;
    }
}

.titleBox {
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    span {
        font-size: 16px;
        position: relative;
    }

    .el-icon {
        margin-right: 5px;
    }

    span::before {
        content: "";
        display: block;
        width: 75px;
        height: 0.5px;
        background-color: #dcdfe6;
        position: absolute;
        top: 9.5px;
        left: -110px;
    }

    span::after {
        content: "";
        display: block;
        width: 75px;
        height: 0.5px;
        background-color: #dcdfe6;
        position: absolute;
        top: 9.5px;
        right: -100px;
    }
}

.layoutBox {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 20px;
    width: 100%;

    .layout {
        width: 100px;
        height: 70px;
        box-sizing: border-box;
        background-color: white;
        box-shadow: 0 0 5px 1px #d4d7de;
        border-radius: 5px;
        margin: 10px 0;
        cursor: pointer;
    }

    .layout:hover {
        box-shadow: 0 0 5px 1px #909399;
    }

    .public {
        width: 100%;
        height: 100%;
        padding: 7px;
        box-sizing: border-box;
        display: flex;
        position: relative;

        .el-icon {
            position: absolute;
            display: none;
            right: 12px;
            bottom: 12px;
            color: var(--isActive-color);
        }
    }

    .lengthways {
        justify-content: space-between;
        align-items: center;

        .lengthways-left {
            width: 20%;
            height: 100%;
            border-radius: 3px;
            background-color: var(--isActive-color);
        }

        .lengthways-right {
            width: 70%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .lengthways-right-top {
                width: 100%;
                height: 20%;
                border-radius: 3px;
                background-color: var(--isActive-color-05);
            }

            .lengthways-right-bottom {
                width: 100%;
                height: 70%;
                border-radius: 3px;
                background-color: var(--isActive-color-02);
                box-sizing: border-box;
                border: 1px dashed var(--isActive-color);
            }
        }
    }

    .classical {
        flex-direction: column;
        justify-content: space-between;

        .classical-top {
            width: 100%;
            height: 20%;
            border-radius: 3px;
            background-color: var(--isActive-color);
        }

        .classical-bottom {
            width: 100%;
            height: 70%;
            display: flex;
            justify-content: space-between;

            .classical-bottom-left {
                width: 20%;
                height: 100%;
                border-radius: 3px;
                background-color: var(--isActive-color-05);
            }

            .classical-bottom-right {
                width: 70%;
                height: 100%;
                border-radius: 3px;
                background-color: var(--isActive-color-02);
                box-sizing: border-box;
                border: 1px dashed var(--isActive-color);
            }
        }
    }

    .crosswise {
        flex-direction: column;
        justify-content: space-between;

        .crosswise-top {
            width: 100%;
            height: 20%;
            border-radius: 3px;
            background-color: var(--isActive-color);
        }

        .crosswise-bottom {
            width: 100%;
            height: 70%;
            background-color: var(--isActive-color-02);
            border-radius: 3px;
            box-sizing: border-box;
            border: 1px dashed var(--isActive-color);
        }
    }

    .subfield {
        justify-content: space-between;

        .subfield-left {
            width: 15%;
            height: 100%;
            border-radius: 3px;
            background-color: var(--isActive-color);
        }

        .subfield-middle {
            width: 20%;
            height: 100%;
            border-radius: 3px;
            background-color: var(--isActive-color-05);
        }

        .subfield-right {
            width: 55%;
            height: 100%;
            border-radius: 3px;
            background-color: var(--isActive-color-02);
            box-sizing: border-box;
            border: 1px dashed var(--isActive-color);
        }
    }
}

.drawer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
}
.el-color-picker__trigger{
    width: 26px !important;height: 26px !important;
}
.el-popper {
    z-index: 3300 !important;
}
</style>
